<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item hide-label field="templateId">
                    <a-select
                      class="width100"
                      v-model="form.templateId"
                      placeholder="请选择商户号"
                      allow-clear
                    >
                      <a-option
                        v-for="(item, index) in treeData.typeList"
                        :key="index"
                        :value="item.id"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-date-picker
                      v-model="form.addTime"
                      show-time
                      class="width100"
                      :disabledDate="changeTraceEnd"
                      :allow-clear="false"
                      placeholder="请选择开始发起投诉时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '近30天',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(29, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '上30天',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(59, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(30, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endTime"
                      show-time
                      :allow-clear="false"
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束发起投诉时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '近30天',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(29, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '上30天',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(59, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(30, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="20">
                      <a-button
                        type="primary"
                        v-permission="payComplaintList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon> <icon-search /></template>搜索</a-button
                      >
                      <a-button v-permission="payComplaintList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="20">
          <!-- <a-button v-permission="addWorkOrder" @click="orderInfo.addOrderVisible = true">
            <template #default>导出</template>
          </a-button> -->
        </a-space>
        <a-space :size="20">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :stripe="(tables.striped as boolean)"
          :loading="tables.tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag v-if="record.state == 1" color="green"> 处理中</a-tag>
                <a-tag v-if="record.state == 0" color="red"> 待处理</a-tag>
                <a-tag v-if="record.state == 2" color="arcoblue"> 已完成</a-tag>
              </template>
              <template v-if="item.key === 'newComplaint'" #cell="{ record }">
                <span v-if="record.newComplaint == true"> 有新留言 </span>
                <span v-else> 无新留言 </span>
              </template>
              <template v-if="item.key === 'phone'" #cell="{ record }">
                <span v-if="record.phone">
                  {{ record.phone }}
                </span>
                <span v-else>---</span>
              </template>

              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button
                    v-permission="'/app/pay/complaint/history/get/list'"
                    size="small"
                    type="text"
                    class="butten"
                    @click="infoDepartments(record)"
                  >
                    详情
                  </a-button>
                  <a-button
                    v-permission="complaintResponse"
                    size="small"
                    status="success"
                    type="text"
                    class="butten"
                    @click="chuliDetails(record)"
                  >
                    回复
                  </a-button>
                  <a-button
                    v-permission="complaintComplete"
                    size="small"
                    type="text"
                    class="butten"
                    @click="successDetails(record)"
                  >
                    成功
                  </a-button>
                  <a-button
                    v-permission="complaintRefund"
                    size="small"
                    type="text"
                    class="butten"
                    @click="tuiDetails(record)"
                  >
                    退款
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" position="end" />
      </template>
    </TableBody>
    <!-- 处理工单 -->
    <a-modal
      v-model:visible="detailShow"
      @before-close="detailShow"
      width="800px"
      title="投诉详情"
      :mask-closable="false"
      title-align="start"
      :body-style="{}"
    >
      <div>
        <div class="top">
          <a-descriptions bordered :column="2" align="center">
            <a-descriptions-item label="投诉订单号">{{ detail.complainId }}</a-descriptions-item>
            <a-descriptions-item label="商户号">{{ detail.merchantNo }}</a-descriptions-item>
            <a-descriptions-item label="订单金额">{{ detail.amount }}</a-descriptions-item>
            <a-descriptions-item label="联系方式">{{
              detail.phone ? detail.phone : '- - -'
            }}</a-descriptions-item>
            <a-descriptions-item label="投诉状态">
              <a-tag v-if="detail.state == 1" color="green"> 处理中</a-tag>
              <a-tag v-if="detail.state == 0" color="red"> 待处理</a-tag>
              <a-tag v-if="detail.state == 2" color="arcoblue"> 已完成</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="投诉时间">{{ detail.createTime }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="top" style="margin-top: 20px">
          <a-table :data="dataList" :pagination="false">
            <template #columns>
              <a-table-column
                v-for="item of columns"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'images'" #cell="{ record }">
                  <div
                    style="width: 100%; display: flex; flex-wrap: wrap"
                    v-if="record.images.length > 0"
                  >
                    <a-image
                      v-for="item in record.images"
                      :key="item"
                      width="40"
                      style="margin-right: 10px; margin-bottom: 10px"
                      :src="item"
                    />
                  </div>
                  <div v-else>- - -</div>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 处理工单 -->
    <a-modal
      v-model:visible="chuliVisible"
      @before-close="chuliVisible = false"
      width="500px"
      title="投诉回复"
      :mask-closable="false"
      title-align="start"
      :body-style="{}"
    >
      <a-form style="margin-top: 10px" ref="userForm" :auto-label-width="true" :model="info">
        <a-form-item
          hide-label
          field="content"
          :rules="[{ required: true, message: '请输入回复内容' }]"
          style="width: 100%"
        >
          <a-textarea
            :auto-size="{
              minRows: 10,
            }"
            v-model="info.content"
            placeholder="请输入回复内容"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          hide-label
          field="content"
          :rules="[{ required: true, message: '请输入回复内容' }]"
          style="width: 100%"
        >
          <a-upload
            action="/app/pay/complaint/upload/image"
            :data="{
              templateId: form.templateId,
              sha256: sha256s,
            }"
            @before-remove="beforeRemove"
            @before-upload="changeImg"
            list-type="picture-card"
            :show-file-list="true"
            @success="onSsl"
            @error="onError"
            :image-preview="true"
          />
          <template #extra>
            <div>图片只支持jpg、png、bmp格式，最多只能上传4张图片，每张图片不能超过2M。</div>
          </template>
        </a-form-item>
      </a-form>

      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 投诉退款 -->
    <a-modal
      v-model:visible="tuiShow"
      @before-close="handleCancels"
      width="500px"
      title="投诉退款"
      :mask-closable="false"
      title-align="start"
      :body-style="{}"
    >
      <a-form style="margin-top: 10px" ref="userForms" :auto-label-width="true" :model="tuiInfo">
        <a-form-item
          label="退款金额"
          field="content"
          :rules="[{ required: true, message: '请输入退款金额' }]"
          style="width: 100%"
        >
          <a-input-number v-model="tuiInfo.refundAmount" placeholder="请输入退款金额" allow-clear />
          <template #extra>
            <div>在此处退款系统订单不会退款,需自己手动退款</div>
          </template>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancels">取消</a-button>
          <a-button type="primary" @click="handleBeforeOks">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {
    payComplaintList,
    complaintComplete,
    complaintResponse,
    complaintRefund,
    historyList,
  } from '@/api/url.ts'
  import dayjs from 'dayjs'
  import CryptoJS from 'crypto-js' // 导入CryptoJS库
  import { get, formpost } from '@/api/http'
  import { useRouter } from 'vue-router'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  import _ from 'lodash-es'
  const router = useRouter()
  const useCommon = useCommonStore()
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const seachForm = ref()
  const chuliVisible = ref(false)
  const tuiShow = ref(false)
  const detailShow = ref(false)
  const detail: any = ref({})
  const dataList = ref([])
  const sha256s = ref('')
  const form = reactive({
    templateId: '', // 支付模板ID
    addTime: '', // 开始时间
    endTime: '', // 结束时间
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const treeData: any = reactive({
    list: [],
    typeList: [],
    option: {},
  })

  const info = ref({
    content: '',
    images: [],
    templateId: '', // 支付模板ID
    complainId: '', // 投诉ID
  })

  const tuiInfo = ref({
    refundAmount: 0,
    totalAmount: 0,
    outTradeNo: 0,
  })

  const tableColumns: any = reactive({
    templateList: [
      {
        title: '类型名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 120,
      },

      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 50,
        fixed: 'right',
      },
    ],
    list: [
      {
        title: '商户号',
        key: 'merchantNo',
        dataIndex: 'merchantNo',
        align: 'center',
        width: 150,
        checked: true,
      },
      {
        title: '问题描述',
        key: 'title',
        dataIndex: 'title',
        align: 'center',
        width: 217,
        checked: true,
      },
      {
        title: '投诉描述',
        key: 'content',
        dataIndex: 'content',
        align: 'center',
        width: 230,
        checked: true,
      },
      {
        title: '订单金额',
        key: 'amount',
        dataIndex: 'amount',
        align: 'center',
        width: 120,
        checked: true,
      },
      {
        title: '联系方式',
        key: 'phone',
        dataIndex: 'phone',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '投诉次数',
        key: 'number',
        dataIndex: 'number',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '处理状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '留言状态',
        key: 'newComplaint',
        dataIndex: 'newComplaint',
        align: 'center',
        checked: true,
        width: 120,
      },
      {
        title: '投诉时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'center',
        checked: true,
        width: 240,
        fixed: 'right',
      },
    ],
  })
  const tables1 = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const columns = ref([
    {
      title: '操作时间',
      dataIndex: 'time',
      key: 'time',
      ellipsis: true,
      tooltip: true,
      width: 190,
    },
    {
      title: '角色',
      dataIndex: 'operator',
      key: 'operator',
      width: 100,
    },
    {
      title: '动作类型',
      dataIndex: 'type',
      key: 'type',
      width: 120,
    },
    {
      title: '投诉描述',
      key: 'content',
      dataIndex: 'content',
      width: 200,
      align: 'center',
    },
    {
      title: '图片',
      key: 'images',
      dataIndex: 'images',
      width: 200,
      align: 'center',
    },
  ])
  const orderInfo: any = reactive({
    info: {
      systemVersion: {},
      system: {},
    },
    showType: false,
    addOrderVisible: false,
    handlerList: {
      workOrderHandlerList: [],
    },
    templatesList: [],
    templatesForm: {
      title: '',
      typeId: '',
      content: '',
    },
    activeKey: null,
    subForm: { content: '' },
  })
  const rowKey = useRowKey('id')
  // function calculateMd5(file) {
  //   const reader = new FileReader()
  //   return new Promise((resolve, reject) => {
  //     reader.onloadend = () => {
  //       const fileContent = reader.result
  //       console.log(fileContent, '11111111')
  //       // 将文件内容转换为字节数组
  //       const byteArray = Array.from(new Uint8Array(fileContent))
  //       console.log(byteArray, '111111112')
  //       // 使用CryptoJS计算MD5哈希值
  //       const md5Hash = CryptoJS.MD5(byteArray).toString()
  //       console.log(md5Hash, 'kankanvsv')
  //       resolve(md5Hash)
  //     }
  //     reader.readAsArrayBuffer(file)
  //   })
  // }

  function changeImg(file) {
    return new Promise((resolve, reject) => {
      const files = JSON.stringify(file)
      if (!file) {
        return
      }
      const reader = new FileReader()
      const blob = new Blob([files], { type: 'application/json' })
      reader.onload = (e) => {
        const buffer = e.target.resultCryptoJS
        const sha256 = CryptoJS.SHA256(buffer)
        sha256s.value = sha256.toString()
        console.log(sha256s.value)
        resolve(true)
      }
      reader.readAsArrayBuffer(blob)
    })
  }

  function beforeRemove(file) {
    return new Promise((resolve, reject) => {
      info.value.images.forEach((item, index) => {
        if (item == file.response.data.image_id) {
          info.value.images.splice(index, 1)
        }
      })
      resolve(true)
    })
  }

  const resetSeach = () => {
    seachForm.value.resetFields()
    table.handleSuccess([])
  }

  //Logo上传
  const onSsl = (fileItem: any) => {
    console.log(fileItem)
    info.value.images.push(fileItem.response.data.image_id)
    Message.success('上传成功')
  }

  //Logo上传
  const onError = (fileItem: any) => {
    console.log(sha256s.value)
    Message.error(fileItem.response.msg)
  }

  const infoDepartments = (val: any) => {
    val.templateId = form.templateId
    detail.value = JSON.parse(JSON.stringify(val))
    doRefreshs(val)
    detailShow.value = true
  }
  const infoRef = ref()
  const beforeCloseForm = () => {
    infoRef.value?.resetFields()
    orderInfo.addOrderVisible = false
  }

  const userForm = ref<typeof Form>()
  const handleBeforeOk = () => {
    userForm.value?.validate().then((error: any) => {
      if (!error) {
        formpost({
          url: complaintResponse,
          data: () => {
            return {
              ...info.value,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancel()
            doRefresh()
          }
        })
      }
    })
  }
  const handleCancel = () => {
    userForm.value?.resetFields()
    chuliVisible.value = false
  }
  const userForms = ref()
  function tuiDetails(val: any) {
    tuiInfo.value.outTradeNo = val.outTradeNo
    tuiShow.value = true
  }
  function handleCancels() {
    tuiInfo.value.outTradeNo = 0
    tuiInfo.value.refundAmount = 0
    tuiInfo.value.outTradeNo = 0
    tuiShow.value = false
  }

  function handleBeforeOks() {
    userForms.value?.validate().then((error: any) => {
      if (!error) {
        formpost({
          url: complaintRefund,
          data: () => {
            return {
              ...tuiInfo.value,
              templateId: form.templateId,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancel()
            doRefresh()
          }
        })
      }
    })
  }

  const successDetails = (val: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定修改此处理状态为成功？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        formpost({
          url: complaintComplete,
          data: () => {
            return {
              templateId: form.templateId,
              complainId: val.complainId,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
      },
    })
  }

  const chuliDetails = (val: any) => {
    chuliVisible.value = true
    info.value.complainId = val.complainId
    info.value.templateId = form.templateId
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function doRefreshs(val: any, value?: number) {
    tables1.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: historyList,
      data: () => {
        return {
          templateId: val.templateId,
          complainId: val.complainId,
        }
      },
    }).then((res) => {
      tables1.tableLoading = false
      dataList.value = res.data
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data
    })
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: payComplaintList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form,
        }
      },
    }).then((res) => {
      tables.tableLoading = false
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data
    })
  }

  function getTemplatesList() {
    useCommon.templatesListFn(true).then((res: any) => {
      treeData.typeList = res.data
    })
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }
  onMounted(async () => {
    form.addTime = dayjs('00:00:00', 'HH:mm:ss').subtract(29, 'day').format('YYYY-MM-DD HH:mm:ss')
    form.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    getTemplatesList()
  })
</script>

<style lang="less" scoped>
  .top {
    background-color: #ffffff;
    border-radius: 10px;
  }
  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0px 10px 10px 0px;
    justify-content: space-between;

    .line {
      width: 5px;
      height: 25px;
      margin-right: 10px;
      background-color: #40a1ff;
    }

    .text {
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      .redText {
        font-size: 14px;
        color: #f53f3f;
        margin-left: 10px;
      }
    }
  }
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  // :deep(.arco-collapse-item-header-right) {
  //   padding-left: 0px;
  // }
  :deep(.arco-collapse-item-content) {
    padding: 0px !important;
    background: none;
    box-sizing: border-box;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  .butten {
    padding: 0px 4px;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }
  .timeLineBox {
    width: 100%;
    .heads {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
      align-items: center;
      .names {
        color: rgb(var(--arcoblue-5));
      }
    }
    .contents {
      width: 100%;
      display: inline-block;
      min-height: 200px;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      background-color: rgb(var(--arcoblue-1));
    }
  }
</style>
